
import React, { Component, createContext, createRef, useContext } from "react";
import type { ReactNode } from 'react'



interface iState {
}
interface iProps {}

interface iContext { title: string; count: number; }

// 1. 创建一个上下文对象
const TitleContext:React.Context<iContext> =createContext({
    title: '标题',
    count: 0
})

class First extends Component{


    // 3. 通过静态属性的方式接收祖先组件传递过来的数据
    // static contextType: React.Context<iContext> = TitleContext;
    componentDidMount(): void {
        console.log(this.context, '11111111');
    }
    render(): ReactNode {
        return <>
        <div>
            {/* 4. 使用 */}
            {/* <h2> First 子组件 - {(this.context as iContext).title} - {(this.context as iContext).count} </h2> */}

            <TitleContext.Consumer>
                {(value: iContext) => {
                   return <h2> First 子组件 - {value.title} - {value.count} </h2>
                }}
            </TitleContext.Consumer>

            <hr />

            <Son></Son>
        </div>
        </>
    }
}


// function Son() {

//     return <>
//         <TitleContext.Consumer>
//             {(value: iContext) => {
//                 return <h6>Son 孙子组件 - {value.title} - {value.count}</h6>
//             }}
//         </TitleContext.Consumer>
//     </>
// }

function Son() {
    // 函数组件的接收方法 useContext接收
    const titleCon: iContext = useContext(TitleContext)
    return <>
        <h6>Son 孙子组件 - {titleCon.title} - {titleCon.count}</h6>
    </>
}




export default class App extends Component {

    state = {
        title: '辣条'
    }

    render() {
        return <>
            <div>
               <h1>祖先组件 --{this.state.title}</h1>
               <hr />
                {/* 2. 使用上下文对象中的 Provider 组件，配合 value 属性将值传递到后代组件中  */}
               <TitleContext.Provider value={{
                    title:this.state.title,
                    count:20
               }}>
                <First></First>
               </TitleContext.Provider>
            </div>
        </>
    }

}